<template>
  <view>
    <u-navbar
      title="设置"
      :background="{ background: '#111723' }"
      title-color="#fff"
      back-icon-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    >
    </u-navbar>
    <view class="gy-1">
      <view class="gy-5" @click="headurl">
        <view class="gy-6">头像</view>
        <view class="gy-7">
          <view class="gy-8">
            <image :src="userInfo.avatar" mode=""></image>
          </view>
          <view class="gy-9"
            ><image src="@/static/images/zhankai.png" mode=""></image
          ></view>
        </view>
      </view>
      <view class="gy-5" @click="state.consignmentShow = true">
        <view class="gy-6">昵称</view>
        <view class="gy-7">
          <view class="gy-8"> {{ userInfo.nickname }}</view>
          <view class="gy-9"
            ><image src="@/static/images/zhankai.png" mode=""></image
          ></view>
        </view>
      </view>
      <view class="gy-5" @click="real">
        <view class="gy-6">实名认证</view>
        <view class="gy-7">
          <view class="gy-10" v-if="userInfo.is_real === 0"></view>
          <view
            class="gy-11"
            :style="userInfo.is_real === 1 ? 'color:#aaa;' : ''"
            >{{ userInfo.is_real === 1 ? '已实名' : '未认证' }}</view
          >
          <view class="gy-9"
            ><image src="@/static/images/zhankai.png" mode=""></image
          ></view>
        </view>
      </view>
      <view class="gy-5" @click="state.cancellation = true">
        <view class="gy-6">账户注销</view>
        <view class="gy-7">
          <view class="gy-9"
            ><image src="@/static/images/zhankai.png" mode=""></image
          ></view>
        </view>
      </view>
      <view class="ss-1" @click="out1">退出登录</view>
    </view>
  </view>
  <u-popup mode="center" v-model="state.consignmentShow" closeable>
    <view class="consignmentShow"
      >请输入昵称
      <u-input
        style="margin-top: 50rpx"
        v-model="state.consig"
        placeholder="请输入昵称"
        :border="true"
      />
      <u-button
        :custom-style="state.customStyle"
        style="margin-top: 50rpx"
        type="success"
        @click="alterNick"
        >确定</u-button
      >
    </view>
  </u-popup>
  <u-modal
    v-model="state.cancellation"
    title="确认注销"
    content="“是否确认注销”"
    showCancelButton
    @confirm="confirm"
  >
  </u-modal>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { default as useUserStore } from '@/store/modules/userInfo'
import { storeToRefs } from 'pinia'
import {
  upload,
  cancellationAccount,
  getUserInfo,
  setUserNickname,
  setUserAvatar
} from '@/api/modules/user'
import uploadImage from '@/utils/ossutil/uploadFile.js'
const store = useUserStore()
const { userInfo } = storeToRefs(store)
const state = reactive({
  consignmentShow: false, //昵称
  cancellation: false,
  consig: '',
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  }
})
//退出扥路
const out1 = () => {
  store.$patch((state) => {
    state.userInfo = {}
  })
  uni.setStorageSync('token', '')
  uni.navigateTo({
    url: `/pages/login/index`
  })
}
//实名认证
const real = () => {
  uni.navigateTo({
    url: `/pages/my/certification/index`
  })
}
//修改头像
const headurl = () => {
  uni.chooseImage({
    success: (chooseImageRes) => {
      const tempFilePaths = chooseImageRes.tempFilePaths
      const ucinfo = userInfo
      uni.uploadFile({
        url: 'http://116.204.105.85:9002/auxiliary/upload', //仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: 'file',
        success: (uploadFileRes) => {
          var data = JSON.parse(uploadFileRes.data)
          ucinfo.value.avatar = data.data.path
          setUserAvatar({ avatar: ucinfo.value.avatar }).then((result) => {
            uni.showToast({
              title: '头像修改成功',
              icon: 'success'
            })
          })
        }
      })
    }
  })
}

// cancellationAccount
const confirm = () => {
  cancellationAccount()
}
//修改昵称
const alterNick = () => {
  setUserNickname({ nickname: state.consig }).then(() => {
    getUserInfo().then((result) => {
      uni.showToast({
        title: '修改成功',
        icon: 'success'
      })
      store.userInfo.nickname = result.data.nickname
      state.consignmentShow = false
    })
  })
}
</script>

<style lang="scss" scoped>
@import './index.scss'; // scss
.consignmentShow {
  padding: 50rpx;
  font-size: 35rpx;
  font-weight: 600;
}
</style>
